<template>
    <div>
        <table-search @search="search(1)" :isExtra="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                     <a-tree-select
                        v-model="form.deptName"
                        allowClear
                        style="width:240px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="deptList"
                        :replaceFields="{children:'children',
                        title:'deptName',
                        key:'deptId',
                        value: 'deptName' }"
                        placeholder="请选择部门"
                    >
                    </a-tree-select>
                </form-item>
                <form-item label="">
                    <a-select
                        v-model="form.personName"
                        show-search
                        style="width:150px;"
                        allowClear
                        placeholder="请选择人员"
                        >
                        <a-select-option :value="item.name" v-for="item in staffList" :key="item.id+'_'+item.name">{{item.name}}</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-range-picker
                        v-model="form.date">
                    </a-range-picker>
                </form-item>
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="key"
            :pagination="pagination"
            :data="list"
        >
            <template slot="time" slot-scope="{ text }">
                <span>{{text.train_start_time}}</span>~<span>{{text.train_end_time}}</span>
            </template>
        </table-list>
    </div>
</template>
<script>
import table from '@/mixins/table';
import {columns} from './list'
const moment = require('moment');
import {remoteListInfo} from '@/api/operation/train'

export default {
    name:'TotalInfo',
    mixins: [table],
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        deptList:{
            type:Array,
            default:()=>[]
        },
        staffList:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        let originForm = {
            deptName:undefined,
            personName:undefined,
            date:[],
        }
        return{
            columns,
            originForm,
            form:{
                ...originForm,
            }
        }
    },
     watch:{
        'form.date':function(e){
            if(e && e.length){
                let fromDate = moment(e[0]).format("YYYY-MM-DD");
                let toDate = moment(e[1]).format("YYYY-MM-DD");
                this.form.trainStartTime = fromDate+' 00:00:00';
                this.form.trainEndTime = toDate+' 23:59:59';
            }else{
                delete this.form.trainStartTime;
                delete this.form.trainEndTime;
            }
        }
    },
    created(){
        this.search()
    },
    methods:{
        async search(page){
            try {
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                let form = {...this.form}
                delete form.date;
                this.list = [];
                let res = await remoteListInfo(form);
                let {list,total} = res.data;
                list.map((item,index)=>{
                    item.key = index+(form.page-1)*form.size
                })
                this.list = list;
                this.total = total;
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>